<template>
  <!-- 提交更改弹框 -->
  <m-modal
    v-model="visible"
    :width="736"
    class="v-submitUpdateModal"
    mask
    :title="title"
    :showFooter="true"
    cancelText="取消"
    okText="提交"
    @ok="handleOk(formData.comment)"
    @cancel="handleCancel"
  >
    <div>
      <div class="_content">
        <div class="_header">
          <div class="_header-title">
            <img src="statics/images/mainpage/welcomeicondk.png">
            <p>提交更改</p>
          </div>
          <div class="_header-des">
            将更改提交到CoWork服务器上进行合并，团队成员可以通过更新来获取最新的更改。
          </div>
        </div>
        <div class="_con">
          <div class="_con-div">
            <a-form-model
              ref="form"
              :form="form"
              :model="formData" 
              :rules="rules"
            >
              <a-form-model-item label="提交信息" prop="comment">
                <a-input
                  ref="input" 
                  v-model="formData.comment"
                  type="textarea"
                  class="_comment-input" 
                  placeholder="简述此次更改的内容"
                  oninput="if(value.length>500)value=value.slice(0,500)"
                  :maxlength="500" 
                  :data-maxnum="formData.comment.length+'/500'"
                >
                </a-input>
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
      </div>
    </div>
  </m-modal>
</template>
<script>
import customModal from '../../common/CustomModal';
import { Portal } from 'src/components/common/Portal.vue';

const com = {
  name: 'submitUpdateModal',
  components: {
    'm-modal': customModal,
  },
  data() {
    return {
      visible: false,
      title: '提交',
      formData: { comment: '' },
      form: this.$form.createForm(this, { name: 'submitUpdate' }),
      rules: {
        comment: [
          { required: true, message: '提交信息不能为空', trigger: ['blur', 'change'] }
        ],
      },
    };
  },

  computed: {},
  watch: {},
  mounted() {
    this.visible = true;
  },
  beforeCreate() {},
  beforeDestroy() {},
  methods: {
    async handleOk(res) {
      const valid = await this.$refs.form.validate().then(() => true).catch(() => false);
      if (valid){
        this.visible = false;
        this.$emit('sure', res);
      } else {
        this.$refs.input.blur();
      }
   
    },
    handleCancel() {
      this.visible = false;
      this.$emit('close');
    },
  },
};
export default com;
export const portal = new Portal(com, { single: true });
</script>
<style lang="scss" scoped>
.v-submitUpdateModal {
	._content {
		._header {
			width: 734px;
			height: 96px;
			background-image: url('~statics/images/mainpage/addtitlebg.png');
			._header-title {
				padding-top: 12px;
				padding-left: 19px;
				display: flex;
				> img {
					width: 32px;
					height: 32px;
				}
				> p {
					line-height: 32px;
					margin-bottom: 0;
					font-weight: bold;
					font-size: 14px;
				}
			}
			._header-des {
				padding-left: 24px;
				height: 24px;
				line-height: 24px;
			}
		}
		._con {
			._con-div {
				width: 568px;
				height: 240px;
				margin: 34px 84px 66px;
				background: #ffffff;
				textarea {
					height: 240px;
				}
				._comment-input {
					position: relative;
					color: #000000;
					&:after {
						content: attr(data-maxnum);
						position: absolute;
						right: 5px;
						bottom: 0px;
						font-size: 12px;
					}
				}
			}
		}
	}
}
</style>
